<template>
  <c-loading :loading="loading">
    <view class="container setting">
      <view class="avatar-box bottom-line" @tap="onAvatarChange()">
        <view class="bod">
          <view class="dg">
            <c-icon icon="photo" size="30rpx" color="var(--color-caption)" />
            <view>更换头像</view>
          </view>
          <c-img class="avatar" default-src="/assets/imgs/default/avatar.png" :src="state.avatarUrl"></c-img>
        </view>
      </view>
      <c-cell-box label="名称" arrow @tap="toUpdateName()">
        <view class="text-right">{{ state.nickName }}</view>
      </c-cell-box>
      <c-cell-box label="手机号">
        <view class="text-right">{{ state.phone }}</view>
      </c-cell-box>
      <c-cell-box label="会员等级">
        <view class="text-right">
          <view class="tag" :style="`background:${getLevelColor(state.level)}`">{{ state.levelName }}</view>
        </view>
      </c-cell-box>
      <c-cell-box label="平台服务协议" arrow @tap="router.push('/pagesBus/article/helpInfo?code=protocol')"></c-cell-box>
    </view>
    <template #popup>
      <c-popup position="bottom" v-model="showUpdateName">
        <view class="popup-textarea-wrap">
          <view class="popup-textarea-title">修改昵称</view>
          <input class="input" maxlength="30" v-model="nickName" placeholder="请输入昵称" />
          <view><c-button type="primary" @tap="onUpdateName">提交</c-button></view>
        </view>
      </c-popup>
    </template>
  </c-loading>
</template>
<script setup>
import { CButton, CLoading, CCellBox, CImg, CPopup, CIcon } from '@/components';
import { useLoading, afterLogin, useRouter } from '@/hooks';
import { View, Textarea } from '@tarojs/components';
import Taro from '@tarojs/taro';
import { reactive, ref } from 'vue';
import api from '@/api';
import toast from '@/utils/toast';

const router = useRouter();

const state = ref({});
// const levelMap = ref({});
const showUpdateName = ref(false);
const nickName = ref('');

const getLevelColor = level => {
  switch (level) {
    case 0:
      return 'var(--color-gray)';
    case 1:
      return 'var(--color-info)';
    case 2:
      return '#cb9d55';
    default:
      return 'rgba(0,0,0,.8)';
  }
};
const toUpdateName = () => {
  showUpdateName.value = true;
  nickName.value = state.value.nickName;
};
const onUpdateName = async () => {
  if (!nickName.value) toast.error('请输入昵称');
  await api.user
    .userUpdateUserInfo({
      nickName: nickName.value
    })
    .toast('修改成功', true);
  state.value = await api.user.userGetInfo(true);
  showUpdateName.value = false;
  nickName.value = '';
  router.callback(state.value);
};

const onAvatarChange = () => {
  Taro.chooseImage({
    sizeType: ['compressed'],
    count: 1,
    success: async r => {
      const fileCode = await api.file.upload('avatar', r.tempFilePaths[0]).error();
      await api.user
        .userUpdateUserInfo({
          avatarUrl: fileCode
        })
        .toast('修改成功', true);
      state.value = await api.user.userGetInfo(true);
      router.callback(state.value);
    }
  });
};
const { loading, restart } = useLoading(async options => {
  await afterLogin();
  // levelMap.value = await api.user.userLevelMap();
  state.value = await api.user.userGetInfo(true);
});
</script>
<style lang="scss">
.setting.container {
  .avatar-box {
    text-align: center;
    background-color: var(--color-caption);
    padding: 60px 0;
    .bod {
      margin: auto;
      width: 150px;
      height: 150px;
      border-radius: 50%;
      border: 1px solid var(--color-background);
      overflow: hidden;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      &::after {
        content: '';
        width: 100%;
        height: 100%;
        display: block;
        top: 0;
        left: 0;
        position: absolute;
        z-index: 2;
        background-color: rgba($color: #000000, $alpha: 0.3);
      }
    }
    .dg {
      position: relative;
      z-index: 3;
      text-align: center;
      color: var(--color-caption);
      font-size: 22px;
    }

    .avatar {
      width: 100%;
      height: 100%;
      display: block;
      top: 0;
      left: 0;
      position: absolute;
    }
  }
  .avatar-cell {
    .cell-box-flex {
      height: 160px;
      line-height: 160px;
      align-items: center;
      .flex-end {
        height: 100%;
        align-items: center;
      }
    }
  }
  .tag {
    display: inline-block;
    line-height: 2em;
    font-size: 20px;
    padding: 0 18px;
    color: var(--color-caption);
    font-weight: bold;
    margin-left: 10px;
    border-radius: 10px;
  }
}
</style>
